<template>
    <div class="container">
        <div class="main">
            <div class="left">
                <router-link to="/documentCenter" class="item">文档中心</router-link>
                
            </div>
            <div class="right">
                <a href="https://diy.youzanyun.com" class="panel-item"><img
                        src="https://b.yzcdn.cn/app-doc/img/kongzhitai.png">控制台</a>
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>
<style lang="less" scoped>
a {
    color: currentColor;
}

.container {

    width: 100%;
    background-color: #fff;
    
    z-index: 2;
    position: sticky;
    top: 0;

    .main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 1200px;
        height: 48px;
        margin: 0 auto;
        background-color: #fff;

        .left {
            display: flex;
            justify-content: space-between;
            width: 896px;

            .item {
                display: flex;
                align-items: center;
                height: 24px;
                font-size: 14px;
                cursor: pointer;
                text-decoration: none;
                color: currentColor;

                &.router-link-exact-active {
                    color: #155bd4;
                }
            }


        }

        .panel-item {
            display: flex;
            align-items: center;
            height: 24px;
            font-size: 14px;
            cursor: pointer;

            img {
                width: 1em;
                height: 1em;
                margin: 0 0.5em;
            }
        }
    }

}
</style>